<template>
	<div>
		<van-nav-bar>

			<template #right>

				<van-image v-if="user.headerimg" :src="user.headerimg" type="contain" round width="30vw"/>
				<router-link to="/" v-else>登录</router-link>
				
				<span>{{ user.nick }}</span>
				<div class="lablevue">
					<LableVue></LableVue>
				</div>
			</template>
			
		</van-nav-bar>
	</div>
</template>

<script setup>
//拿到存储的信息，才能渲染到上面
import { useUserStore } from '@/stores/user'
import LableVue from './Lable.vue';

const store = useUserStore()
const user = store.userInfo //拿到数据然后渲染



</script>

<style lang="scss" scoped>
.van-nav-bar {
position: relative;
	height: 23vh;
text-align: center;
width: 100vw;
span{
	font-size: 6vw;

}
	.van-image {
		margin: 0;
		position: absolute;
		top: 4vh;
		right: 35vw;
		border-radius: 50%;
background: linear-gradient(145deg, #f0f0f0, #cacaca);
box-shadow:  8px 8px 16px #9f9f9f,
             -8px -8px 16px #ffffff;
	}
}
.lablevue{
position: absolute;
right: 40vw;
top: 19vh;
}
</style>
